<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>文本框输入统计自定义高度</title>
    <style>
    *{
        box-sizing: border-box;
    }
    .box{
        width: 1200px;
        margin: 100px auto;
        position: relative;
    }
    p{
        position: relative;
        background-color: lightblue;
        text-align: right;
        right: 0;
    }
    textarea{
        width:1200px;
        height: 60px; 
        font-size: 16px;
        position:absolute;
        top: 50px;
        left:0;
        border: 1px solid black;
    }
    .pp{
        display:block;
        width:100%;
        height: 100%;
        font-size: 16px;
        border: 1px solid black;
        visibility:hidden;    
    }
    </style>
</head>

<body>
    <div class="box">
    <p>你已输入 <span>0</span> 字&#X3000;</p>
    <textarea id="content" oninput="onInput()"></textarea>
    <div class="pp"></div>
    </div>

    <script src="./js/jquery.js"></script>
</body>

</html>
<script>
    var sum1 = 0;
    var sum2 = 0;
    var height;
    onInput();
    function onInput(){
        for(var i = 0;i < $("#content").val().length; i++){
            if($("#content").val().charCodeAt(i)>255 ){
                sum1 = sum1+1;
            }
    　　　　else {
                sum2 = sum2+1;
            }　
        }
        var sum = Math.ceil(sum1+sum2/2);
        $('span').html(sum);
        if(sum > 160){
            $('span').css('color','red');
        }else{
            $('span').css('color','black');
        }
        sum1 = 0;
        sum2 = 0;
        $('.pp').text($("#content").val());
        height = $('.pp').height()+10;
        if(height < 60){
            $("#content").css('height','60px');
        }else{
            $("#content").css('height',height+'px');
        }
        
    }
 
    //    $("#content").on('input propertychange',function(){
    //     for(var i = 0;i < $("#content").val().length; i++){
    //         if($("#content").val().charCodeAt(i)>255 ){
    //             sum1 = sum1+1;
    //         }
    // 　　　　else {
    //             sum2 = sum2+1;
    //         }　
    //     }
    //     var sum = Math.ceil(sum1+sum2/2);
    //     $('span').html(sum);
    //     if(sum > 160){
    //         $('span').css('color','red');
    //     }else{
    //         $('span').css('color','black');
    //     }
    //     sum1 = 0;
    //     sum2 = 0;
    //     $('.pp').text($("#content").val());
    //     height = $('.pp').height()+10;
    //     if(height < 60){
    //         $("#content").css('height','60px');
    //     }else{
    //         $("#content").css('height',height+'px');
    //     }
        
    // });
    
    $('#content').focusin(function(){
        $(this).css('border','1px solid red');
    });
    $('#content').focusout(function(){
        $(this).css('border','1px solid black');
    })
   
    
    
</script>